<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
    <script src="../js/jquery-3.6.0.js"></script>
    <script src="../element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
</head>
<body>
<!--1. 准备一个容器-->
<div id="app">
    <!--顶部操作-->
    <el-row>
        <el-col  :span="4" type="flex" justify="left">
            <el-button :span="6" type="primary" icon="el-icon-plus" >添加</el-button>
            <el-button :span="6" type="danger" icon="el-icon-delete" >批量删除</el-button>
        </el-col>
        <!--搜索功能-->
        <el-col :span="4" type="flex" justify="left">
            <el-input type="text" placeholder="请输入要查询的关键字">
                <el-select v-model="selectData" slot="prepend">
                    <el-option label="编号" value="1"></el-option>
                    <el-option label="姓名" value="2"></el-option>
                    <el-option label="地址" value="3"></el-option>
                </el-select>

                <el-button type="info" slot="append" icon="el-icon-search">搜索</el-button>
            </el-input>
        </el-col>
    </el-row>

    <!--整体表单-->
    <!--绑定选择按钮-->
    <el-table v-bind:data="userList"
              @select-all="selectAll"
              @select="selectOne"
    >

        <el-table-column  type="selection" align="center"></el-table-column>
        <el-table-column label="序号"  type="index" align="center"></el-table-column>
        <el-table-column label="主键"  prop="id" align="center"></el-table-column>
        <el-table-column label="姓名"  prop="username" align="center"></el-table-column>
        <el-table-column label="性别"  prop="sex" align="center" :formatter="sexFormatter"></el-table-column>
        <el-table-column label="生日"  prop="birthday" align="center"></el-table-column>
        <el-table-column label="手机"  prop="tel" align="center"></el-table-column>
        <el-table-column label="职业"  prop="profession" align="center" :formatter="professionFormatter"></el-table-column>
        <el-table-column label="薪资"  prop="sal" align="center"></el-table-column>
        <el-table-column label="地址"  prop="address" align="center"></el-table-column>
        <el-table-column label="备注"  prop="remark" align="center"></el-table-column>
        <!--添加按钮-->
        <el-table-column label="操作" width="240px" align="center">
            <el-button type="danger" icon="el-icon-delete">删除</el-button>
            <el-button type="warning" icon="el-icon-edit">编辑</el-button>
        </el-table-column>
    </el-table>

</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            userList:[
                {
                    id: 10010,
                    username: "李文豪",
                    sex: "1",
                    birthday: '2022-07-15',
                    tel: "13812345678",
                    profession: "1",
                    sal: 3000.15,
                    address: "湖北武汉",
                    remark: "我是帅哥"
                },
                {
                    id: 10012,
                    username: "魏聪聪",
                    sex: "1",
                    birthday: '2022-05-05',
                    tel: "18812345678",
                    profession: "2",
                    sal: 4000.14,
                    address: "湖北襄阳",
                    remark: "我是大帅哥"
                },
                {
                    id: 10013,
                    username: "陈志军",
                    sex: "0",
                    birthday: '2022-03-25',
                    tel: "15812345678",
                    profession: "3",
                    sal: 30500,
                    address: "湖南长沙",
                    remark: "hi ok"
                },
                {
                    id: 10014,
                    username: "郭云飞",
                    sex: "0",
                    birthday: '2022-02-12',
                    tel: "13899945888",
                    profession: "1",
                    sal: 13000.25,
                    address: "河北石家庄",
                    remark: "大"
                },
                {
                    id: 10018,
                    username: "汪坔",
                    sex: "1",
                    birthday: '2022-07-08',
                    tel: "13812345530",
                    profession: "2",
                    sal: 3000.25,
                    address: "广州",
                    remark: "很大"
                },
                {
                    id: 10019,
                    username: "熊周哲",
                    sex: "1",
                    birthday: '2022-08-05',
                    tel: "13812345420",
                    profession: "2",
                    sal: 5999.45,
                    address: "湖北武汉",
                    remark: "哈哈"
                },
                {
                    id: 10033,
                    username: "王思维",
                    sex: "1",
                    birthday: '2022-12-12',
                    tel: "13812345666",
                    profession: "3",
                    sal: 5000.25,
                    address: "北京朝阳区",
                    remark: "哎呀"
                },
                {
                    id: 10040,
                    username: "王一炜",
                    sex: "0",
                    birthday: '2022-09-15',
                    tel: "13812345999",
                    profession: "1",
                    sal: 8000.15,
                    address: "成都",
                    remark: "你好"
                },
                {
                    id: 10045,
                    username: "老丁",
                    sex: "0",
                    birthday: '2022-10-16',
                    tel: "13812345320",
                    profession: "2",
                    sal: 23000,
                    address: "天津",
                    remark: "哦哦"
                },
                {
                    id: 10050,
                    username: "赵鹏",
                    sex: "0",
                    birthday: '2022-02-03',
                    tel: "13812345111",
                    profession: "1",
                    sal: 3500.5,
                    address: "黑龙江哈尔滨",
                    remark: "是呀"
                },
                {
                    id: 10052,
                    username: "郭建华",
                    sex: "1",
                    birthday: '2022-04-12',
                    tel: "13812345689",
                    profession: "1",
                    sal: 3999.5,
                    address: "内蒙古赤峰",
                    remark: "vue好简单"
                },
                {
                    id: 10060,
                    username: "陈云飞",
                    sex: "1",
                    birthday: '2022-07-11',
                    tel: "18888888888",
                    profession: "3",
                    sal: 1500,
                    address: "湖北黄冈",
                    remark: "哎，挣钱好难"
                }
            ],
            selectData:"1",

        },
        methods: {
            // 性别格式化处理
            sexFormatter:function (rowsData) {
                return rowsData.sex == 1 ? "男":"女";
            },
            professionFormatter:function (rowsData) {
                switch (rowsData.profession){
                    case "1":
                        return "程序猿";
                    case "2":
                        return "攻城狮";
                    case "3":
                        return "码农";
                }
            },
            selectAll:function (param) {
                console.log(params)
            },
            selectOne:function (param) {
                console.log(param)
            }
        },
    });
</script>

</body>
</html>